<template>
  <div ref="content" class="popup-container">
    <input type="text" @click="open" :placeholder="title" readonly :value='text' class="popup-input">
    <div ref="mask" class="popup-mask" @click="close"></div>
    <div ref="popup" class="popup-box">
      <div class="popup-box-in">
        <div class="popup-box-title">{{title}}</div>
        <ul class="popup-list">
          <li v-for="(item, index) in options" @click='val = item.value;'>
            <span class="text">{{item.name}}</span>
            <span class="icon"><i style="font-size:20px;" class="fa" :class="[ val == item.value ? 'fa-dot-circle-o' : 'fa-circle-o' ]"></i></span>
          </li>
        </ul>
        <div class="popup-box-bar"><i class="gray6" @click="close">取消</i><i class="blue" @click="confirm">确定</i></div>
      </div> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'popupRadio',
  model: {
    prop: 'value',
    event: 'input'
  },
  props:{ 
    title:String,
    value:String,
    options:{
      type:Array,
      default:function () {
        return []
      }
    }
  }, 
  data () {
    return {
      val:this.value,
      text:this.getText()
    }
  },
  mounted(){
    this.confirm();
  },
  methods:{
    getText(){
      for (var i = 0; i < this.options.length; i++) {
        var item = this.options[i];
        if(item.value == this.val){
          return item.name;
        }
      }
      return "";
    },
    open(){ 
      this.val = this.value;
      this.$refs.mask.style.display = 'block';
      this.$refs.popup.style.display = 'flex';
    },
    close(){
      this.$refs.mask.style.display = 'none';
      this.$refs.popup.style.display = 'none';
    },
    confirm(){
      this.text = this.getText(); 
      this.$emit('input', this.val);  
      this.close();
    }
  }
}
</script>

